<template>
	<view class="contentBody">
		<u-form-item label="预估重量" label-width="150">
			<u-radio-group  v-model="form.radio" placement="column">
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in yuguzl" :key="index" :name="item.name" :disabled="item.disabled">
					{{ item.name }}
				</u-radio>
			</u-radio-group>
		</u-form-item>
		<u-form-item label="回收物照片" prop="form.idcard" label-width="150">
			<u-upload width="150" height="150"></u-upload>
		</u-form-item>
		<view class="addorderBox">
			<text>如您有多种回收品类，可先点击添加物品品类。</text>
			<u-button type="warning" shape="circle" plain @click="addbuy">
				<u-icon name="plus" size="32" style="margin-right:10rpx;"></u-icon>
				添加物品品类
			</u-button>
		</view>
		<u-form-item label="预约时间" :rightIconStyle="{color:'#00b362', fontSize: '32rpx'}" rightIcon="calendar-fill"
			label-width="150" prop="form.yuyoutime">
			<DateTimePicker @timeSelected="handleTimeSelected" />
		</u-form-item>
		<u-form-item label="预约地址" label-width="150">
			<u-input v-model="form.yuyoudizi" />
			<u-button slot="right" type="primary" @click="toAddressList">更换/编辑地址</u-button>
		</u-form-item>
		<view class="tips_warning">
			注意事项：
			<p>1、因回收成本原因，社区、写字楼、单元楼价格面议</p>
			<p>2、小于10公斤暂不保证上门回收</p>
			<p>3、重量超过100公斤，需拍照供回收员参考</p>
			<p>4、若无法获取报价，请重新打开手机定重新进入获取</p>
		</view>
	</view>
</template>

<script>
	import DateTimePicker from '@/components/DateTimePicker.vue'; // 记得根据你的目录结构来调整路径

	export default {
		components: {
			DateTimePicker
		},
		props: {
			form: Object,
		},
		data() {
			return {
				yuguzl: [{
						name: "10-50公斤"
					},
					{
						name: "50-100公斤"
					},
					{
						name: "100公斤以上"
					},
				],
			};
		},
		methods: {
			addbuy() {
				// Logic to add more items to the cart
			},
			handleTimeSelected(selected) {
				this.form.yuyoutime = selected;
			},
			toAddressList() {
				this.$emit('addressSelected');
			},
		},
	};
</script>

<style lang="scss" scoped>
 @import '../FormCompontent.css';
</style>